<template>
  <div class="pro-password-tip">
    <n-card v-show="showPasswordTip" class="password-tip">
      <span class="font-color" style="font-weight: 600">{{ tipsText }}</span>
      <div class="password-tip-bg-box">
        <div
          class="password-tip-bg-content"
          :style="password === '' ? passwordTipObj[0] : passwordTipStyle"
        ></div>
      </div>
      <div class="grade">
        <span class="font-color" style="font-weight: 600">密码等级</span>
        <span
          class="font-color"
          v-for="obj in passwordTipObj.filter((item, index) => index !== 0)"
          :key="obj.tips"
        >
          <span :style="{ color: obj.backgroundColor }">{{ obj.tips }}</span>
          ：{{ obj.ruleText }}
        </span>
      </div>
      <div v-if="password !== ''">
        当前密码等级：<span
          :style="{ color: passwordTipStyle.backgroundColor }"
        >
          {{ getPasswordTips }}</span
        >
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup name="proPasswordTip">
import { passwordTipObjType } from './useProPasswordTip'
interface propType {
  // 是否显示密码提示框
  showPasswordTip: boolean
  // 密码
  password: string
  // 提示
  tipsText: string
  // 密码提示样式对象
  passwordTipObj?: Array<passwordTipObjType>
}
const props = withDefaults(defineProps<propType>(), {
  showPasswordTip: false,
  password: '',
  tipsText: '请输入密码',
  passwordTipObj: () => {
    return [
      {
        width: '0%',
        backgroundColor: 'red',
        tips: ''
      },
      {
        width: '30%',
        backgroundColor: 'red',
        tips: '弱',
        ruleText: '密码小于六位',
        rule: (password) => {
          if (password.length < 6) {
            return true
          } else {
            return false
          }
        }
      },
      {
        width: '60%',
        backgroundColor: 'orange',
        tips: '中',
        ruleText: '密码大于六位且包含字母',
        rule: (password) => {
          const patt = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]*$/
          if (!patt.test(password)) {
            return true
          } else {
            return false
          }
        }
      },
      {
        width: '100%',
        backgroundColor: 'green',
        tips: '高',
        ruleText: '密码大于六位且包含大小写字母',
        rule: (password) => {
          const patt = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]*$/
          if (patt.test(password)) {
            return true
          } else {
            return false
          }
        }
      }
    ]
  }
})
const { password, passwordTipObj } = toRefs(props)

// 当前密码样式
const passwordTipStyle = ref({
  width: '30%',
  backgroundColor: 'red'
})
/**
 * @description: 处理密码格式改变
 * @param {number} index
 * @return {string}
 */
const handlePsswordStyleChange = (index: number): string => {
  const { width, backgroundColor } = passwordTipObj.value[index]
  passwordTipStyle.value = { width, backgroundColor }
  return passwordTipObj.value[index].tips
}
/**
 * @description: 获取当前的密码等级
 * @param {*} computed
 * @return {*}
 */
const getPasswordTips = computed(() => {
  let isFind = false
  for (let index = 1; index < passwordTipObj.value.length; index++) {
    const obj = passwordTipObj.value[index]
    if (obj.rule && obj.rule(password.value)) {
      isFind = true
      return handlePsswordStyleChange(index)
    }
  }
  if (!isFind) return handlePsswordStyleChange(1)
})
</script>

<style lang="less" scoped>
.password-tip {
  margin-top: 10px;
  border-radius: 4px;
  z-index: 1;
  width: 100%;
  :deep(.n-card__content) {
    padding: 10px;
  }
}
.font-color {
  color: var(--text-color);
}
.password-tip-bg-box {
  height: 10px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background-color: #dee2e6;
  // background-color: var('--active-color')
  .password-tip-bg-content {
    height: 10px;
    border-radius: 2px;
    transition: width 0.5s ease-out;
  }
}
.grade {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
